<template>
  <div class="leftBottom">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <div class="content">
      <div class="tableDiv">
        <p class="tableHead">
          <span>监测点</span>
          <span>时间</span>
          <span>出水压力(Mpa)</span>
          <span>流量(m³/h)</span>
        </p>
        <div class="tableBodyDiv">
          <vue-seamless-scroll
            class="scroll_box"
            :data="dataList"
            :class-option="defineScroll"
            style="
              height: 100%;
              overflow: hidden;
              width: 100%;
              color: white;
              font-size: 18px;
              text-align: center;
            "
          >
            <p class="tableBody" v-for="(item, index) in dataList" :key="index">
              <span :title="item.entName">{{ item.entName }}</span>
              <span>{{ item.value1 }}</span>
              <span>{{ item.value2 }}</span>
              <span>{{ item.value3 }}</span>
            </p>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LeftBottom",
  props: {},
  components: {},
  data() {
    return {
      dataList: [
        {
          entName: "金泰花园二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "浭阳二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "纺织小区二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "燕山小区二供泵房",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "金泰花园二供泵房11",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "浭阳二供泵房2",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "纺织小区二供泵房22131",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "燕山小区二供泵房12",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "金泰花园二供泵房11232",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "浭阳二供泵房2111",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "纺织小区二供泵房22213131",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
        {
          entName: "燕山小区二供泵房12312",
          value1: "17:13.03",
          value2: "0.26",
          value3: "0",
        },
      ],
    };
  },
  computed: {
    defineScroll() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  watch: {},
  methods: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.leftBottom {
  margin-top: 20px;
}
.content {
  width: 100%;
  z-index: 9999;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .tableDiv {
    width: 100%;
    p {
      margin-bottom: 4px;
    }
    .tableHead {
      margin-top: 14px;
      display: flex;
      height: 60px;
      line-height: 60px;
      background: rgba(53, 106, 255, 0.43);
      font-size: 20px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &:nth-child(1) {
          padding-left: 25px;
          box-sizing: border-box;
          text-align: left;
          width: 213px;
        }
        &:nth-child(2) {
          width: 149px;
        }
        &:nth-child(3) {
          width: 149px;
        }
        &:nth-child(4) {
          flex: 1;
        }
      }
    }
    .tableBodyDiv {
      height: 243px;
      overflow: auto;
    }
    .tableBody {
      display: flex;
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #b1e5ffff;
      background: rgba(176, 218, 239, 0.12);
      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &:nth-child(1) {
          padding-left: 25px;
          box-sizing: border-box;
          text-align: left;
          width: 213px;
        }
        &:nth-child(2) {
          width: 149px;
        }
        &:nth-child(3) {
          width: 149px;
        }
        &:nth-child(4) {
          flex: 1;
        }
      }
      .action {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #fcd44f;
        cursor: pointer;
      }
    }
  }
}
</style>
